<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script type="text/javascript" src="js/vue-2.6.12.js"></script>
	<style type="text/css">
      .red_bg{
        background: red;
      }
      .size{
        font-size: 50px;
      }
	</style>
</head>
<body>
<div id="app">

<!--	必须是

class名:布尔值,class名:布尔值,....  布尔值为true时 class存在 生效

-->
	
	<div :class="{'red_bg':show,'size':show}">动态修改css的值</div>
	
	<button type="button" @click="changeClass">修改class</button>
</div>

<script>
	
	let app = new Vue({
	  
	  el:"#app",
	  data:{
	    
	    show:true,
	    
	  },
	  methods:{
	    changeClass(){
	      this.show = !this.show;
	    }
	  }
	  
	})
	
</script>



</body>
</html>